<template>
  <transition name="modal">
    <div class="modal-mask">
      <div class="modal-wrapper">
        <div class="modal-container">
          <div class="modal-header">
            <slot name="header">
              提示
            </slot>
          </div>

          <div class="modal-body">
            <slot name="body">
              {{msg}}
            </slot>
          </div>

          <div class="modal-footer">
            <slot name="footer">
              <button class="btn btn-primary" @click="confirm">确定</button>
              <button class="btn btn-primary" @click="cancel">取消</button>
            </slot>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>

  export default {
    name: 'AlertModal',

    props: ['msg'],
    data () {
      return {

      };
    },

    mounted () {

    },

    methods: {
      /**
       * 确定
       */
      confirm () {
        this.$emit('confirm');
      },
      cancel () {
        this.$emit('cancel');
      }
    }
  };
</script>

<style lang="less" scoped>
  .modal-container {
    max-width: 500px !important;
    color: #333333;
    margin-top: 160px !important;
    .modal-body {
      // div {
      //   margin-bottom: 10px;
      // }
    }
    .modal-footer{
      height: 40px;
      .btn-primary{
        float: right;
        margin: 15px 20px 15px 0;
      }
    }
  }
</style>
